import React,{ Component } from 'react';
import { connect } from 'react-redux';
import {messages} from "share/common";
import SearchArea from 'components/search-area';
import SlideFrame from 'components/slide-frame';
import { Table, Popconfirm, Button, Icon, Divider, message, Tooltip} from 'antd';

import NewQuotaAdjust from './new-quota-adjust';
import DetailSever from 'containers/supplier-management/overview/supplier-detail/supplier-detail.service'
import 'styles/supplier-management/overview/yget-quota-adjust.scss';

import moment from 'moment';


class YgetQuotaAdjust extends Component{

  constructor(props){
    super(props);
    this.state = {
      loading: false,
      isShowSlide: false, // 是否显示侧滑
      slideParams:{editItem:{}}, // 传递个侧滑组件的参数
      data:[],
      pagination:{
        current: 1,
        page: 0,
        total:0,
        pageSize:10,
      },
      operatorName:'',
      formItems: [{
        type:'combobox',
        id: 'operator',
        options:[],
        required: false,
        label: messages('setting.key812')/*'操作对象'*/,
      }],
      columns:[
        {
          title:messages('supplier.key196')/*事务ID*/,
          key:'creditOID',
          dataIndex:'creditOID',
          render:value => (
            <Tooltip placement="topLeft" title={value}>
              <span>{value}</span>
            </Tooltip>
          ),
          width:140,
        },
        {
          title:messages('supplier.key197')/*操作时间*/,
          key:'lastModifiedDate',
          dataIndex:'lastModifiedDate',
          render: value => moment(value).format('YYYY-MM-DD HH:MM'),
          width:160,
        },
        {
          title:messages('supplier.key198')/*操作人*/,
          key:'operator',
          dataIndex:'operator',
        },
        {
          title:messages('setting.key812')/*'操作对象'*/,
          key:'actionList',
          dataIndex:'actionList',
          render:value => {
            let showStr = ''
            value.map((item,ind) =>{
              showStr += `${item.action}${ind >= value.length - 1 ? '' : '、'}`;
            })
            if(showStr.length > 8){
              return (
                <Tooltip placement="topLeft" title={showStr}>
                  <span>{showStr}</span>
                </Tooltip>
              )
            }else{
              return showStr;
            }
          },
          width:160,
        },
        {
          title: messages('supplier.key199')/*调整金额*/,
          key: 'limitAccount',
          dataIndex: 'limitAccount',
        },
        {
          title: messages('supplier.key200')/*生效日期*/,
          key: 'effectDate',
          dataIndex: 'effectDate',
          render: value => moment(value).format('YYYY-MM-DD'),
        },
        {
          title:messages('common.column.status')/*状态*/,
          key: 'status',
          dataIndex: 'status',
          render: value => value === 0 ? messages('supplier.key201')/*未同步*/ : messages('supplier.key202')/*已同步*/,
        },
/*        {
          title:messages('common.operation')/!*'操作'*!/,
          key:'operation',
          dataIndex:'operation',
          render: (value,record,index) => {
            return (
              <Popconfirm title={messages('request.key321')} onConfirm={()=>this.toDelete(index)}>
                <a onClick={(event)=>this.toEdit(event, record)}>{messages('common.edit')/!*编辑*!/}</a>
                <Divider type='vertical'/>
                <a style={{color:'red'}}>{messages('common.delete')/!*删除*!/}</a>
              </Popconfirm>
            )
          }
        },*/  //  todo 以后可能会用到该操作，对应代码已经完成80%
      ]
    }
  }

  componentWillMount(){
    this.getQuotaList({pageNum:1});
    this.getOperatorList();
  }

  getQuotaList = (params) => {
    this.setState({loading:true});
    DetailSever.ygetSearchList(params).then(res => {
      if(res.status === 200){
        this.setState({
          data:res.data.detailList,
          pagination:{
            current: params.pageNum,
            page: params.pageNum,
            total:res.data.total,
            pageSize:10,
          },
          loading:false
        });
      }
    }).catch(err => {
      this.setState({loading:false});
      message.error(err.response.data.message);
    })
  }

  getOperatorList = () => {
    DetailSever.ygetGetOperatorList().then(res => {
      if(res.status === 200){
        const { formItems } = this.state;
        formItems[0].options = res.data.map(item => ({label:item,value:item}));
        this.setState({formItems});
      }
    }).catch(err => {
      message.error(err.response.data.message);
    })
  }

  toEdit = (event, record) => {
    event.stopPropagation();
    let slideParams = this.state.slideParams;
    slideParams.editItem = record;
    this.setState({slideParams: slideParams, isShowSlide:true});
  }

  toSearch = values => {
    if(this.state.loading){
      return;
    }
    let params = {
      operator:values.operator,
      pageNum:1,
    };
    this.getQuotaList(params);
    this.setState({operatorName: values.operator});
  }

  clearSearchFun = () => {
    if(this.state.loading){
      return;
    }
    this.getQuotaList({pageNum:1});
  }

  toDelete = index => {
    console.log(index);
  }

  onChangePager = (pagation) => {
    let params = {
      operator:this.state.operatorName,
      pageNum:pagation.current,
    };
    this.getQuotaList(params);
  }

  // 返回
  handleBack = () => {
    window.history.go(-1);
  };

  // 新增调整额度
  addNewQuota = () => {
    this.setState({isShowSlide:true});
  }

  closeSlide = () => {
    this.setState({isShowSlide:false});
  }

  afterCloseSlide = (value) => {
    let slideParams = this.state.slideParams;
    slideParams.editItem = {};
    this.setState({isShowSlide:false, slideParams: slideParams},()=>{
      if(typeof value === 'boolean' && value){
        this.getQuotaList({pageNum:1});
      }
    });
  }

  render(){
    const { columns, data, pagination, isShowSlide, slideParams, formItems, loading } = this.state;
    return (
      <div className='yget-quota-adjust'>
        <SearchArea submitHandle={this.toSearch} clearHandle={this.clearSearchFun} searchForm={formItems}/>
        <div style={{padding:'12px 2px'}}>{messages('common.total1',{total:pagination.total})}</div>
        <div className='addButton'>
          <Button type='primary' onClick={this.addNewQuota}>{messages('supplier.key203')/*新增*/}</Button>
        </div>
        <Table
          rowKey={record =>record.creditOID}
          loading={loading}
          dataSource={data}
          columns={columns}
          pagination={pagination}
          onChange={this.onChangePager}
          bordered
        />
        <a style={{fontSize:'14px',paddingBottom:'20px',marginTop: '20px'}} onClick={this.handleBack}>
          <Icon type="rollback" style={{marginRight:'5px'}}/>{messages('common.back')}
        </a>
        <SlideFrame
          title={messages('supplier.key215')/*调整额录入*/}
          show={isShowSlide}
          content={NewQuotaAdjust}
          onClose={this.closeSlide}
          params={slideParams}
          afterClose={this.afterCloseSlide}
        />
      </div>
    )
  }

}

YgetQuotaAdjust.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    company: state.login.company
  }
}

export default connect(mapStateToProps)(YgetQuotaAdjust);

